<template>
  <div>
    <!-- 登录-标题 -->
    <van-nav-bar title="黑马头条-登录" />
    <!-- 登录-表单区域 -->
    <div>
      <!--
      1、van-form：整体表单组件
      2、@submit：自定义事件(提交事件)
      3、van-field：输入框(表单的一项)
      输入框name属性=‘用户名’，表单整体提交时，默认收集一个提交对象，往后台发送的参数名就是name里的值{'用户名'：‘页面值’}
      4、label：输入框左侧文本
      5、:rules 属性是配置检验的规则，冒号:属性后面跟的是‘表达式’(表达式被认为是一个常量或者变量，数组也是表达式范畴)，:属性名=‘表达式’(是一个动态属性)，而不加冒号的属性名后面跟的是字符串 属性名=‘字符串’(静态属性)
      不叫冒号就看等号右边，加了冒号就看引号里面的值
      6、round 是否为圆形
       (1)round属性后面没有,默认值为true
       这样写不对round='true' true字符串
       这样写才对:round='true' true布尔常量 一个表达式
       7、block：块级元素
       8、type: 按钮类型(有默认的颜色)
       9、native-type：原生button标签的type属性，native-type="submit"代表的这个van-button组件渲染的原生button标签是submit提交整个表单功能的按钮
      -->
      <van-form @submit="onSubmit">
        <van-field v-model="user.mobile" required name="mobile" label="手机号" placeholder="请输入11位手机号"
          :rules="[{ required: true, message: '请填写正确的手机号', pattern: /^1[3-9]\d{9}$/ }]" />
        <van-field v-model="user.code" required type="password" name="code" label="密码" placeholder="请输入6位密码"
          :rules="[{ required: true, message: '请填写正确的密码', pattern: /^\d{6}$/ }]" />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" :disabled="isLoading" :loading="isLoading"
            loading-text="正在登录中...">登录</van-button>
        </div>
      </van-form>
    </div>
    <!--  -->
  </div>
</template>

<script>
import { loginAPI } from '@/api'
// import { Notify } from 'vant' // 这是一个函数调用 直接引到要用的页面中即可
import Notify from '@/ui/Notify.js'

import { setToken } from '@/utils/token'
import { setStorage } from '@/utils/storage'
// 写需求的套路：
// 1、html+css
// 2、数据铺设，数据绑定，数据微调
// 3、Js交互(事件/正则)

// 组件使用套路：
// 找组件，引组件，用组件(标签/js复制过来)，读，删，改，加

// 目标1：实现顶部导航->自定义样式
// 目标2：实现表单组件->读，改，加
// 目标3：收集值以后，调用接口->查看登录结果
// 目标4：点击登录后，给用户提示正在登录中，防止用户频繁点击
export default {
  data() {
    return {
      // username: '',
      // password: ''

      // 为了跟后台参数名一致，省的之后传参的时候还要把变量一个一个取出来，要写很多代码
      user: {
        mobile: '18758137204', // 手机号 把手机号写下来 省的每次登录都要写
        code: '246810' // 验证码(密码-必须是246810后台规定死的，无论手机号是什么)
      },
      isLoading: false // 登录按钮的加载状态
    }
  },
  methods: {
    // onSubmit：提交方法(form整体通过验证才能触发)
    async onSubmit(values) {
      // 可以直接用values(代表收集的参数名) 也可以用user  他俩是一样的
      // console.log('submit', values)
      // console.log(this.user) // 直接把对象发给后台
      // 如果不在data里面定义一个对象user 传参的时候还要自己一个一个取(跟后台格式一样)
      // let obj = {
      //   mobile=this.mobile,
      //   code=this.code

      // 状态设置true
      this.isLoading = true
      try {
        const res = await loginAPI(this.user)
        console.log(res)
        Notify({ type: 'success', message: '登录成功了！' })
        setToken(res.data.data.token)
        // localStorage.setItem('refresh_token', res.data.data.refresh_token)
        setStorage('refresh_token', res.data.data.refresh_token)

        // 跳转一定要写在最后，尽量最后执行
        // location.herf：当前浏览器地址和要跳转的地址一样(不包含#后面的瞄点信息)就不会刷新，地址改变就会导致网页刷新
        // location.herf='http://localhost:8080#/layout/home'
        // js代码中要跳转路由页面：this.$router
        // 路由跳转就有两个方法：
        // this.$router.push() -> 压栈(会产生历史记录，可以回退)
        // this.$router.replace() -> 替换(不会产生历史记录)
        // 跳转到Layout页面
        this.$router.replace({
          // 当前是在.vue文件下，可以用this.$route拿到当前路由对象
          path: this.$route.query.path || '/layout/home' // 因为路由规则里/layout没有重定向，所以直接在这里写全
        })
      } catch (err) {
        // Promise内ajax抛出错误，直接进入这里
        Notify({ type: 'danger', message: '账号或密码错误！' })
      }
      // 或者
      // const res = await loginAPI({
      // mobile=this.user.mobile,
      // code=this.user.code
      // 或者 ...this.user 解构开
      // })

      // 网络请求走完 无论是成功或报错，把状态关掉
      this.isLoading = false
    }
  }
}

</script>

<style scoped lang="less">
/*此类名是van-nav-bar组件内的根标签*/
// .van-nav-bar {
//   background-color: #007bff;
// }

/* 此选择器名字是van-nar-bar组件内标签，而scoped尝试把此选择器后面的属性选择器匹配当前页面的标签，(所以选不中组件内部的标签) */
// lang="less"表示当前style标签内是Less语法
// 用/deep/就不会被vscode标记红线
// /deep/会把属性选择器加到此选择器名字前面(用后代选择器的方式往里找匹配的类名)
//要修改组件内的样式，如果你用了scoped，就需要在选择器前面加/deep/即可
// /deep/.van-nav-bar__title {
//   color: #fff;
// }
</style>
